<template>
	<view>
		<button class="container" :style="style" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
			<image class="content" :style="style" :src="avatar"></image>
		</button>
	</view>
</template>

<script>
	import userApi from '../../api/user'
	const defaultAvatarUrl = 'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0'
	
	export default {
		name:"WxAvatar",
		props: {
			widthd: {
				default: '200rpx'
			},
			heightd: {
				default: '200rpx'
			},
			avatarUrl: {
				default: defaultAvatarUrl
			}
		},
		created() {
			
		},
		mounted() {
			var token = uni.getStorageSync('token')
			if (token) {
				userApi.downloadAvatar((res) => {
					this.avatar = res.tempFilePath
				}, (res) => {
					console.log(res)
				})
			}
		},
		data() {
			return {
				avatar: this.$props.avatarUrl,
				style: {
					width: this.$props.widthd,
					height: this.$props.heightd
				}
			}
		},
		methods: {
			onChooseAvatar(e) {
				console.log(this.avatarUrl)
				userApi.uploadAvatar(e.detail.avatarUrl, () => {
					this.avatar = e.detail.avatarUrl
				})
			}
		}
	}
</script>

<style scoped>
	.container {
		border-radius: 50%;
		display: flex; /* flex 布局 */
		flex-direction: column; /* 垂直排列 */
		align-items: center; /* 垂直居中 */
		justify-content: center; /* 水平居中 */
		text-align: center;  /* 文本输入框居中 */
	}
	.content {
		width: 100%;
		height: 100%;
		border-radius: 50%;
		/* position: absolute;
		top: 0;
		left: 0; */
	}
</style>